<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Begin</title>

        <!-- 方式2 -->
        <!-- <style>
            /* 元素选择器 通过标签名来确定作用的标签 */
            input{
                width: 60px;
                height: 30px;
                border-radius: 5px;
                background-color: bisque;
                font-weight: bold;
                font-family: serif;
                border: 3px solid black;
            }
        </style> -->

        <!-- 方式3 -->
        <link rel="stylesheet" href="./引入方式.css">
    </head>
    <body>
        <!-- 
            css引入的三种方式
                1. 行内式 通过标签的 style 属性来引入 css 样式
                2. 内嵌式 在 head 标签的 style 属性中定义本页面中某个标签的公共样式 需要通过选择器来确定标签
                3. 导入外部 css 在 head 标签中通过 link 标签导入
        -->
        <!-- 方式1 -->
        <input
            type="button"
            name="check"
            value="确认"
            style="
                width: 100px; /* 方式1 直接赋值的优先级最高 */
                height: 30px;
                border-radius: 5px;
                background-color: bisque;
                font-weight: bold;
                font-family: serif;
                border: 3px solid black;
            "
        />

        <!-- 方式2 -->
        <input type="button" name="check" value="确认" />
    </body>
</html>
